<!--
  按钮组件
  @author 邵鹏坤 2022年10月1日
  1 按钮种类：
    1.1 常规 default：
      圆角
      灰黑色字体
      浅灰色边框颜色
      白色背景
      悬浮字体和背景以及边框变色
  2 数据源：
    使用props从使用者（父组件）接受所有的导航列表，用于渲染桌面图标组件（数量，路由，图标，导航名）
-->
<template>
  <button
    type="button"
    :class="[un.e(), un.p(_type), un.p(_size), un.is('disabled', _disabled), un.is('text', _text)]"
    :style="{
      '--custom-color': _new_color?.rgb,
      '--custom-color-hover': _new_color?.newrgb
    }"
  >
    <Icon v-if="_icon" :iconClass="_icon" fontSize="20px"></Icon>
    <span class="button-span" @click="_type = 'success'"><slot></slot></span>
  </button>
</template>

<script setup lang="ts">
  import useNamespace from '@/hooks/use-namespace'
  import useProp from '@/hooks/use-prop'
  import useColor from '@/hooks/use-color'
  import Icon from '@/views/icon/Icon.vue'
  defineProps<{
    size?: string
    type?: 'default' | 'success' | 'danger' | 'warning' | 'primary'
    disabled?: boolean
    icon?: string
    color?: string
    text?: boolean
  }>()
  const un = useNamespace('button')
  const _size = useProp('size')
  const _type = useProp('type', 'default')
  const _disabled = useProp('disabled')
  const _icon = useProp('icon')
  const _color = useProp('color')
  const _new_color = useColor(_color.value)
  const _text = useProp('text')
</script>

<style lang="scss" scoped>
  @import '../css/index.scss';
</style>
